<template>
	<view id="my" class="my">
		<!-- 头部信息 -->
		<view class="my-message">
			<image :src="userInfo.headimgurl" mode="aspectFill" class="head-img" @click="bindLogin"></image>
			<view class="my-message-right" @click="bindLogin">
				<view class="my-nickname">{{userInfo.nickname ? userInfo.nickname : '点击登录'}}</view>
				<view>一个专注猫咪领养的平台</view>
			</view>
			<view class="my-list">
				<view class="my-l-item" @click="jumpList('/pagesMy/publish/publish')">
					<icon class="icon-WDFB"></icon>
					<text>我的发布</text>
				</view>
				<view class="my-l-item" @click="jumpList('/pagesMy/collect/collect')">
					<icon class="icon-WDSC"></icon>
					<text>我的收藏</text>
				</view>
				<view class="my-l-item" @click="jumpList('/pagesMy/myAdopt/myAdopt')">
					<icon class="icon-WDLY"></icon>
					<text>我的领养</text>
				</view>
				<!-- <view class="my-l-item" @click="jumpList('/pagesMy/history/history')">
					<icon class="icon-WDJL"></icon>
					<text>浏览记录</text>
				</view> -->
			</view>
		</view>
		<!-- 功能列表 -->
		<view class="func-list">
			<!-- <view class="func-item">
				<icon class="icon-LXWM"></icon>
				<view class="fun-item-right">
					<text>联系我们</text>
					<icon class="icon-my-right"></icon>
				</view>
			</view> -->
			<view class="func-item" @click="aboutAs">
				<icon class="icon-GYWM"></icon>
				<view class="fun-item-right">
					<text>关于我们</text>
					<icon class="icon-my-right"></icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		lxmAboutus
	} from '@/api/index.js'
	export default {
		data() {
			return {
				userInfo: {},
			}
		},
		methods: {
			// 点击登录
			bindLogin: function() {
				if (!app.userIdentity()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false;
				}
			},
			
			// 调整列表
			jumpList:function(e){
				if (!app.userIdentity()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false;
				}
				uni.navigateTo({
					url:e
				})
			},

			// 关于我们
			aboutAs: function() {
				lxmAboutus().then(res => {
					uni.navigateTo({
						url: `/pages/article/article?url=${res}`
					})
				})
			},
		},
		onLoad() {},
		onShow() {
			// 获取头像和昵称
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					this.userInfo = JSON.parse(res.data)
				}
			});
		}
	}
</script>

<style lang="scss">
	#my {
		height: 100%;
		background: #F9F9F9
	}

	.my-message {
		width: 100%;
		height: 276rpx;
		background: #F2ECEC;
		padding: 38rpx 30rpx 80rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 153rpx;

		.head-img {
			width: 158rpx;
			height: 158rpx;
			border: 5rpx solid #FFFFFF;
			border-radius: 50%;
			background-color: #E0E0E0;
			margin-right: 36rpx;
		}

		.my-message-right {
			color: #666666;
			font-size: 28rpx;
			flex: 1;

			.my-nickname {
				color: #333333;
				font-size: 42rpx;
				margin-bottom: 16rpx;
			}
		}

		.my-list {
			width: 710rpx;
			height: 152rpx;
			// padding: 22rpx 36rpx;
			padding: 22rpx 52rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx -3rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 12rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: -117rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.my-l-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #666666;
				font-size: 24rpx;

				&>icon {
					width: 72rpx;
					height: 72rpx;
					margin-bottom: 6rpx;
				}

				.icon-WDFB {
					background: url(../../static/image/icon-my-wdfb.png) no-repeat;
					background-size: cover;
				}

				.icon-WDSC {
					background: url(../../static/image/icon-my-wdsc.png) no-repeat;
					background-size: cover;
				}

				.icon-WDLY {
					background: url(../../static/image/icon-my-wdly.png) no-repeat;
					background-size: cover;
				}

				.icon-WDJL {
					background: url(../../static/image/icon-my-lljl.png) no-repeat;
					background-size: cover;
				}
			}
		}
	}

	.func-list {
		padding: 0 36rpx;
		background: #FFFFFF;
		color: #333333;
		font-size: 32rpx;

		.func-item {
			display: flex;
			align-items: center;
			height: 88rpx;

			&>icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}

			.icon-LXWM {
				background: url(../../static/image/icon-my-lxwm.png) no-repeat;
				background-size: cover;
			}

			.icon-GYWM {
				background: url(../../static/image/icon-my-gywm.png) no-repeat;
				background-size: cover;
			}

			.fun-item-right {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #EFEFEF;

				.icon-my-right {
					width: 10rpx;
					height: 16rpx;
					background: url(../../static/image/icon-my-right.png) no-repeat;
					background-size: cover;
				}
			}

			&:nth-last-of-type(1)>.fun-item-right {
				border: none;
			}
		}
	}
</style>
